<style lang="less" rel="stylesheet/less" type="text/less">
.index-box {
  padding-top: 20px;
  padding-left: 50px;
}
</style>
<template>
  <div class="index-box">
    <Row type="flex" justify="start">
      <i-col push="1" style="width:400px;">
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="labelWidth(145,170)"
          name="create-form"
        >
          <Form-item label="人脸检测价格" prop="detectface">
            <InputNumber
              :min="0"
              v-model="formValidate.detectface"
              placeholder="请输入价格"
              name="create-detectface"
            />
          </Form-item>

          <Form-item label="表情识别价格" prop="emotion">
            <InputNumber
              :min="0"
              v-model="formValidate.emotion"
              placeholder="请输入价格"
              name="create-emotion"
            />
          </Form-item>

          <Form-item label="人脸关键点检测价格" prop="landmarks">
            <InputNumber
              :min="0"
              v-model="formValidate.landmarks"
              placeholder="请输入价格"
              name="create-landmarks"
            />
          </Form-item>

          <Form-item label="人脸年龄性别检测价格" prop="agegender">
            <InputNumber
              :min="0"
              v-model="formValidate.agegender"
              placeholder="请输入价格"
              name="create-agegender"
            />
          </Form-item>

          <Form-item label="3D人脸融合价格" prop="texture_swap_3d">
            <InputNumber
              :min="0"
              v-model="formValidate.texture_swap_3d"
              placeholder="请输入价格"
              name="create-texture-swap_3d"
            />
          </Form-item>

          <Form-item label="人头检测价格" prop="detecthead">
            <InputNumber
              :min="0"
              v-model="formValidate.detecthead"
              placeholder="请输入价格"
              name="create-detecthead"
            />
          </Form-item>

          <Form-item label="人脸三维重建价格" prop="generate_3d_model">
            <InputNumber
              :min="0"
              v-model="formValidate.generate_3d_model"
              placeholder="请输入价格"
              name="create-generate-3d-model"
            />
          </Form-item>

          <Form-item label="人脸对比价格" prop="compare">
            <InputNumber
              :min="0"
              v-model="formValidate.compare"
              placeholder="请输入价格"
              name="create-compare"
            />
          </Form-item>

          <Form-item label="人脸老化价格" prop="aging">
            <InputNumber
              :min="0"
              v-model="formValidate.aging"
              placeholder="请输入价格"
              name="create-aging"
            />
          </Form-item>

          <Form-item label="人脸融合价格" prop="swapface">
            <InputNumber
              :min="0"
              v-model="formValidate.swapface"
              placeholder="请输入价格"
              name="create-swapface"
            />
          </Form-item>

          <Form-item label="头发分割价格" prop="hairsegement">
            <InputNumber
              :min="0"
              v-model="formValidate.hairsegement"
              placeholder="请输入价格"
              name="create-hairsegement"
            />
          </Form-item>

          <Form-item label="头发染色价格" prop="haircolor">
            <InputNumber
              :min="0"
              v-model="formValidate.haircolor"
              placeholder="请输入价格"
              name="create-haircolor"
            />
          </Form-item>

          <Form-item label="妆容迁移价格" prop="makeupswap">
            <InputNumber
              :min="0"
              v-model="formValidate.makeupswap"
              placeholder="请输入价格"
              name="create-makeupswap"
            />
          </Form-item>

          <!-- 备注 -->
          <Form-item label="备注" prop="remark">
            <i-input
              v-model="formValidate.remark"
              placeholder="请输入备注"
              name="create-remark"
              type="text"
            />
          </Form-item>

          <Form-item label="计费类型">
            <RadioGroup v-model="formValidate.type" size="large">
              <Radio label="默认" @click="handleSubmit('formValidate')" />
              <Radio label="活动" />
            </RadioGroup>
          </Form-item>

          <!-- 开始时间 -->

          <Form-item v-if="formValidate.type==='活动'" label="开始时间" prop="started_at">
            <DatePicker
              v-model="formValidate.started_at"
              :style="{width: '260px'}"
              placeholder="请输入开始时间"
              type="datetime"
              placement="top"
              name="create-started_at"
              @on-change="changeSTDate"
            />
          </Form-item>

          <!-- 结束时间 -->
          <Form-item v-if="formValidate.type==='活动'" label="结束时间" prop="ended_at">
            <DatePicker
              v-model="formValidate.ended_at"
              :style="{width: '260px'}"
              placeholder="请输入结束时间"
              type="datetime"
              placement="top"
              name="create-ended_at"
              @on-change="changeEDDate"
            />
          </Form-item>

          <!-- 按钮 -->
          <Form-item>
            <Button type="primary" name="create__submit" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="warning" style="margin-left: 8px" @click="handleReset('formValidate')">重置</Button>
          </Form-item>
        </Form>
      </i-col>
    </Row>
  </div>
</template>
<script>
import labelWidthMixin from "../../../labelWidthMixin";

export default {
  name: "CreatePlan",

  mixins: [labelWidthMixin],

  data() {
    return {
      formValidate: {
        ended_at: null,
        started_at: null,
        detectface: 0,
        type: "默认",
        emotion: 0,
        landmarks: 0,
        agegender: 0,
        texture_swap_3d: 0,
        detecthead: 0,
        generate_3d_model: 0,
        compare: 0,
        aging: 0,
        swapface: 0,
        hairsegement: 0,
        haircolor: 0,
        makeupswap: 0,
        remark: ""
      },
      real_started_at: null,
      real_ended_at: null,
      token: "",

      ruleValidate: {
        // 验证表单数据规则
        detectface: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        emotion: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        landmarks: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        agegender: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        texture_swap_3d: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        detecthead: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        generate_3d_model: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        compare: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        aging: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        swapface: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        hairsegement: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        haircolor: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        makeupswap: [
          {
            required: true,
            type: "number",
            message: "价格是必须的",
            trigger: "blur,change"
          }
        ],
        remark: [
          {
            required: true,
            message: "备注是必须的",
            trigger: "blur,change"
          }
        ],
        started_at: [
          {
            required: true,
            type: "date",
            message: "开始时间是必须的",
            trigger: "blur,change"
          }
        ],
        ended_at: [
          {
            required: true,
            type: "date",
            message: "结束时间是必须的",
            trigger: "blur,change"
          }
        ]
      }
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
  },
  methods: {
    changeSTDate(date) {
      this.real_started_at = date;
    },

    changeEDDate(date) {
      this.real_ended_at = date;
    },
    /**
     * 重置表单
     * @param  {string} name {表单的ref}
     * @return {undefined}
     */
    handleReset(name) {
      this.$refs[name].resetFields();
      this.formValidate.type = "默认";
    },

    /**
     * 提交表单
     * @param  {string} name {表单上的ref值}
     * @return {undefined}
     */
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.formDataCreate();
        } else {
          this.$Message.error("填写的信息有误");
        }
      });
    },

    /**
     *
     * 手动拼接表单数据
     */
    formDataCreate() {
      const new_object = {
        token: this.token,
        prices: {
          face: {
            detectface: this.formValidate.detectface,
            emotion: this.formValidate.emotion,
            landmarks: this.formValidate.landmarks,
            agegender: this.formValidate.agegender,
            texture_swap_3d: this.formValidate.texture_swap_3d,
            detecthead: this.formValidate.detecthead,
            generate_3d_model: this.formValidate.generate_3d_model,
            compare: this.formValidate.compare,
            aging: this.formValidate.aging,
            swapface: this.formValidate.swapface,
            hairsegement: this.formValidate.hairsegement,
            haircolor: this.formValidate.haircolor,
            makeupswap: this.formValidate.makeupswap
          }
        },
        type: this.formValidate.type,
        remark: this.formValidate.remark
      };
      if (this.formValidate.type === "活动") {
        new_object.start_time = this.real_started_at;
        new_object.end_time = this.real_ended_at;
      }

      this.$emit("postStore", new_object);
    }
  }
};
</script>
